<template>
    <ul class="menus">
        <li @click="changePage('DefaultPage')">默认页面</li>
        <li @click="changePage('SingFilePage')">单文件组件</li>
        <li @click="changePage('FileModePage')">文件模块</li>
        <li @click="changePage('ErrorPage')">工程错误和图片资源</li>
        <li @click="changePage('StylePage')">样式处理</li>
        <li @click="changePage('BuildPage')">打包操作</li>
        <li @click="changePage('AjaxPage')">ajax的集成和使用</li>
        <li @click="changePage('RoutePage')">路由模块</li>

        <li @click="changePage('ElementUIPage')">ElementUI使用</li>
    </ul>
    <div class="content">
        <component :is="page"></component>
    </div>
</template>

<script>
import DefaultPage from "@/views/DefaultPage/DefaultPage.vue";
import SingFilePage from "@/views/SingFilePage/SingFilePage.vue";
import FileModePage from "@/views/FileModePage/FileModePage.vue";
import ErrorPage from "@/views/ErrorPage/ErrorPage.vue";
import StylePage from "@/views/StylePage/StylePage.vue";
import BuildPage from "@/views/BuildPage/BuildPage.vue";
import AjaxPage from "@/views/AjaxPage/AjaxPage.vue";
import RoutePage from "@/views/RoutePage/RoutePage.vue";


import ElementUIPage from "@/views/ElementUIPage/ElementUIPage.vue";


export default {
    components: {
        DefaultPage, SingFilePage, FileModePage,ErrorPage,StylePage,BuildPage,
        AjaxPage,RoutePage,
        ElementUIPage
    },
    data() {
        return {
            page: "AjaxPage"
        }
    },
    methods: {
        changePage(page) {
            this.page = page;
        }
    },
}
</script>

<style scoped>


.menus {
    list-style: none;
    padding: 0px;
    margin: 0px;
    background-color: rgba(245, 245, 245, 0.8);
    box-shadow: 0 0 10px 0px #999;
    position: sticky;
    top: 0px;
    z-index: 6;
    padding: 0px 20px;
    backdrop-filter: saturate(50%) blur(4px);
}

.menus li {
    display: inline-block;
    padding: 10px 16px;
    cursor: pointer;
    user-select: none;
}

.menus li:hover {
    background-color: #333;
    color: white;
}

.content {
    padding: 20px;
    margin-bottom: 800px;
}
</style>